<script setup lang="ts">
import {inject} from "vue"
import {StnTableEditorDelBtnGroup} from "st-ui-vue3-navie"
import EditBtn from "../EditBtn/EditBtn.vue"
import DelBtn from '../DelBtn/DelBtn.vue'

/**
 * 组件参数
 */
const {
  getKey,
  editBtnText = '编辑',
  delBtnText = '删除',
  delConfirmText = '是否确认删除？',
  isDelCascadeConfirm = false,
  delCascadeConfirmText = '是否级联删除？'
} = defineProps<{
  // 表单信息主键的获取函数
  getKey: () => string | number;
  // 编辑按钮文本
  editBtnText?: string;
  // 删除按钮文本
  delBtnText?: string;
  // 删除确认文本
  delConfirmText?: string;
  // 是否开启级联删除确认
  isDelCascadeConfirm?: boolean;
  // 级联删除确认文本
  delCascadeConfirmText?: string;
}>()

/**
 * 组件双向绑定
 */
const form = defineModel<Record<string, any>>('form')

/**
 * 注入父组件提供的内容
 */
// 显示编辑对话框
const showTableDataEditor = inject<(form: Record<string, any>) => void>('showTableDataEditor')
// 删除处理函数
const delTableDataHandler = inject<(rowKeys: (string | number)[], cascade?: boolean) => void>('delTableDataHandler')
</script>

<template>
  <div class="table-edit-del-btn-group">
    <StnTableEditorDelBtnGroup>
      <template #edit>
        <EditBtn
          is-text
          is-collapse
          :text="editBtnText"
          @click="() => showTableDataEditor(form)"
        />
      </template>
      <template #del>
        <DelBtn
          is-text
          is-collapse
          :text="delBtnText"
          :confirm-text="delConfirmText"
          :is-cascade-confirm="isDelCascadeConfirm"
          :cascade-confirm-text="delCascadeConfirmText"
          @positive-click="(isCascade: boolean) => delTableDataHandler([getKey()], isCascade)"
        />
      </template>
    </StnTableEditorDelBtnGroup>
  </div>
</template>

<style scoped>

</style>
